<template>
	<el-drawer title="预约详情" v-model="visible" :size="800" destroy-on-close @closed="$emit('closed')">
		<span class="detail-timestamp">最后更新于：{{form.update_time}}</span>
		<el-container v-loading="loading">
			<el-main>
				<el-form>
					<el-row :gutter="24">
						<el-col :lg="12">
							<el-form-item label="负责人" prop="user_join_name">{{form.user_join_name}}</el-form-item>
						</el-col>
						<el-col :lg="12">
							<el-form-item label="事项" prop="subject">{{form.subject}}</el-form-item>
						</el-col>
						<el-col :lg="12">
							<el-form-item label="预约时间" prop="begin_time">{{form.begin_time}}</el-form-item>
						</el-col>
						
							<el-divider content-position="center">推荐空间</el-divider>
			<scTable :data="form.space_list"  drag-sort>
				<el-table-column prop="room" label="空间名称" width="200">
				</el-table-column>
				<el-table-column prop="park_id" label="所属园区" width="100" align="center" :show-overflow-tooltip="true">	
				</el-table-column>
				<el-table-column prop="area_id" label="所属片区" width="100" align="center" :show-overflow-tooltip="true">			
				</el-table-column>
				<el-table-column prop="name" label="所属楼宇" width="100" align="center" :show-overflow-tooltip="true">
			
				</el-table-column>
				<el-table-column prop="floor" label="所属楼层" width="80" align="center" :show-overflow-tooltip="true">
				
				</el-table-column>
				<el-table-column prop="room_size" label="空间面积" width="80" align="center" :show-overflow-tooltip="true">
				
				</el-table-column>
				<el-table-column prop="rental_pricing" label="租金定价" width="80" align="center" :show-overflow-tooltip="true">
					
				</el-table-column>
			</scTable>
		
						<el-col :lg="12">
							<el-form-item label="其他需求" prop="content">{{form.content}}</el-form-item>
						</el-col>
					</el-row>
					
				</el-form>
				<el-footer style="text-align: center;">
					<el-button @click="visible=false">关闭</el-button>
				</el-footer>
			</el-main>
		</el-container>
	</el-drawer>
</template>

<script>
import AttachMenu from '@/views/module/attachMenu'
export default {
	emits: ['success', 'closed'],
	components: {
		AttachMenu
	},
	data() {
		return {
			loading: false,
			form: {
				id:'',
				user_join:'',
				subject:'',
				begin_time:'',
				space_name:'',
				content:'',
				space_list: [],
			},
			visible: false,
			isSaveing: false,
		}
	},
	mounted() {

	},
	methods: {
		//显示
		open(){
			this.visible = true;
			return this;
		},
		isValid(data){
			if (Object.prototype.toString.call(data) === '[object Undefined]') {
				return false
			}
			if (Object.prototype.toString.call(data) === '[object Null]') {
				return false
			}
			return true
		},
		async setData(data){
			let res = await this.$API.attractinvestment.appointment.getAppointmentById.get({id:data.id});
			if(res.code == 200) {
				let data = res.data[0]
				this.form.user_join = data.user_join
				this.form.subject = data.subject
				this.form.begin_time = data.begin_time
				this.form.space_name = data.space_name
				this.form.content = data.content
				this.form.user_join_name = data.user_join_name
				this.form.space_list = data.space_list
			}
		},
	}
}
</script>

<style>
.el-drawer__header{
	background-color: #efefef;
}
.el-drawer__title{
	color: #333;
	background-color: #efefef;
	border: 1px solid #ddd;
	border-radius: 3px;
	margin: 0px -40px 0px -48px;
	padding: 0px 0px 15px 60px;
}
.el-drawer__close-btn{
	margin-top: -12px;
}
.detail-timestamp{
    position: absolute;
    right: 40px;
    top: 64px;
    z-index: 100;
    color: #8f8f8f;
    font-size: 13px;
}
</style>
